<template>
  <div class="image-loader-container">
      <img v-if="!everythingDone" class="placeholder" :src="placeholder">
      <img class="src" :src="src" @load='handleLoad' :style="{opacity:srcStatus,transition:`${duration}ms`}">
  </div>
</template>

<script>
export default {
    props:{
        src:{
            type:String,
            required: true,
        },
        placeholder:{
            type:String,
            required:true,
        },
        duration:{
            type:Number,
            default:500,
        }
    },
    data(){
        return{
            srcLoaded: false,
            everythingDone:false,
        }
    },
    computed:{
        srcStatus(){
            return this.srcLoaded?1:0;
        }
    },
    methods:{
        handleLoad(){
            this.srcLoaded=true;
            setTimeout(() => {
                this.everythingDone=true;
                this.$emit('load');
            }, this.duration);
        }
    }
}
</script>

<style lang="less" scoped>
@import '~@/styles/maxin.less';
.image-loader-container{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    img{
        .self-fill(absolute);
    }
}
.placeholder{
    filter: blur(25px);
}
</style>